Upon opening a new Flash document you will find youself at a screen similar to this.
For this example we will not worry about the size or color of the stage.
Select the rectangle tool from the tools menu on the left hand side. Using the options towards the bottom of the tools menu, select the color you want your button outine to be and then the button color. For this example, we will use a red button with a black outline.
The next step is to draw the button in the workspace. Click and drag the mouse until you have a square the size you want it to be. The small circle in the lower right hand corner tells you that the shape you have drawn is a square and not a rectangle.
(The same notation is used by flash when drawing circles/epllipses)
The above picture shows our example square drawn.
Next, we want to work specifically with the square object so we must select it. Double-clicking the square will select the object and make it appear grayed.
We want to center our square in the middle of the workspace. In the "Window" menu, select "Align" This will bring up the "Align & Info &Transform" menu box (shown above) in the upper right hand corner. Click the "To Stage" button so that the changes are relative to the entire working area. (1) Use the buttons in the drop box to center your square both vertically (2) and horizontally (3).
The square is centered.
The next step is to tell the program we want the square to act like a button. To do this, the square must be changed into a symbol. Simply right-click the square and select "Convert to Symbol...".
In the dialogue box that appears, select the button symbol type and give it a title - we used "BTN". The square is now a button and appears like this:
You will notice that when the button is selected (double-clicked on) the timeline changes form. Instead of having frames, it now has the headings of Up, Over, Down, and hit. We will now explain what each of these frames mean and make adjustments in each one.
Since we will be making changes in each of the frames, we need to create keyframes out of each of them. To do this, right click the frame in the timeline and select "Insert Keyframe". Repeat this procedure for all four frames.
The Up frame allows you to design how the button will appear when it is "at rest" that is, the mouse is not over it and it is not being pressed. In this frame we will place text onto the button.
To this frame we added a text box saying "The Button is Up". We will leave the color of the button as it is now.
The Over frame depicts how the button will appear when the mouse is over the button, but not pressing (clicking on) it. To make adjustments in this frame, simply double click the frame in the timeline.
In this frame, all we will change is the color of the button. To do this, double-click the button to select it. Then, select the color you want the button to be from the bottom options pannel. We selected blue.
The Down frame allows you to alter how the button will appear when the button is pressed down (clicked-on) by the user. You can edit this frame just like the previous two frames of the button.
For our example, we will turn the button color to yellow and change the text on the button to say "The Button is Pressed."
The hit frame allows you to edit the region of the screen that the button frame settings apply to. The button in the Hit frame is defaulted to the same appearance it is in the Up frame. This setting means that the area to click that applies to that button is the same area that the square is drawn on. If you were to move the square in the Hit frame, none of the other button frame changes would apply when the mouse was over the square, but would apply when the mouse was over the hit area. For an example of this here.
Notice that with button one, the frame changes were applied when the mouse was over the square drawing. This is because the hit area was set as the same area as the square drawing.
When the mouse was moved over buton two, no frame changes occured. However, when the button was moved over the lowest line of text, the frame changes did occur. This is because the hit area of button two is set as the area that text takes up.
As you can see, the hit area can be slightly confusing, but may be very useful if used properly. For example, this would allow you to have buttons that do not physically show up on the page. This may be would allow users to create presentations in Flash that do not have a visible button on every page. Rather, when the user wishes to progress in the presentation, they can just click the area of the screen that they know contains the button hit frame.
Now that we have created the button, we should test it. To test your button, (or any other file using Macromedia Flash), simply click the Control menu and then select "Test Movie". This will pop up a window that will allow you to test your button.
To view the sample buton that was created in this tutorial, click here .